import React, { useState } from 'react'
import Card from '../../ui/Card/Card'


import './LogForm.css'


const LogForm = (props) => {

  const [inputDate, setInputDate] = useState('')
  const [inputDesc, setInputDesc] = useState('')
  const [inputTime, setInputTime] = useState('')

  const inputDateHandler = (e) => {
    setInputDate(e.target.value)
  }
  const inputDescHandler = (e) => {
    setInputDesc(e.target.value)
  }
  const inputTimeHandler = (e) => {
    setInputTime(e.target.value)
  }

  const submitHandler = (e) => {
    e.preventDefault()
    const newLog = {
      date: inputDate,
      desc: inputDesc,
      time: +inputTime
    }
    setInputDate('')
    setInputDesc('')
    setInputTime('')

    //回调给父组件
    props.onLogChange(newLog)

  }

  return (
    <Card className='log-form'>
      <form>
        <div className='form-item'>
          <label htmlFor='inputDate'>日期：</label>
          <input id='inputDate' onChange={inputDateHandler} type='date' />
        </div>
        <div className='form-item'>
          <label htmlFor='inputDesc'>内容：</label>
          <input id='inputDesc' onChange={inputDescHandler} type='text' />
        </div>
        <div className='form-item'>
          <label htmlFor='inputTime'>时间：</label>
          <input id='inputTime' onChange={inputTimeHandler} type='number' />
        </div>
        <div className='form-btn'>
          <button onClick={submitHandler}>添加</button>
        </div>
      </form>
    </Card>
  )
}

export default LogForm